<%@ page contentType="text/html;charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<es:contentHeader/>
<div class="page-content">
    <es:showMessage/>
    <div class="row">
        <div class="col-xs-12 widget-container-col ui-sortable">
            <div class="widget-box widget-color-blue ui-sortable-handle">
                <div class="widget-header">
                    <h5 class="widget-title bigger lighter">
                        <i class="ace-icon fa fa-hand-o-right"></i> 查询
                    </h5>
                </div>
                <div class="widget-body">
                    <div class="widget-main no-padding clearfix search_area">
                        <form id="searchForm" class="form-horizontal padding-vertical" data-change-search="true">
                            <div class="row">
                                <div class="form-group col-sm-4">
                                    <esform:label path="search.show_eq" cssClass="col-sm-4 control-label no-padding-right">是否显示</esform:label>
                                    <div class="col-sm-8">
                                        <esform:select path="search.show_eq" cssClass="form-control input-sm">
                                            <esform:option label="全部" value=""/>
                                            <esform:options items="${booleanList}" itemLabel="info" itemValue="value"/>
                                        </esform:select>
                                    </div>
                                </div>
                                <div class="form-group col-sm-4">
                                    <esform:label path="search.id_in" cssClass="col-sm-4 control-label no-padding-right">编号</esform:label>
                                    <div class="col-sm-8">
                                        <esform:input path="search.id_in" cssClass="form-control input-sm" placeholder="多个使用空格分隔"/>
                                    </div>
                                </div>
                                <div class="form-group col-sm-4">
                                    <esform:label path="search.weight_gt" cssClass="col-sm-2 control-label no-padding-right">权重从</esform:label>
                                    <div class="col-sm-10">
                                        <div class="input-group">
                                            <esform:input path="search.weight_gt" type="number" cssClass="form-control input-sm" placeholder="大于"/>
                                            <span class="input-group-addon input-sm no-border-left no-border-right">
                                                <esform:label path="search.weight_lt" cssClass="no-margin"><i class="fa fa-exchange"></i></esform:label>
                                            </span>
                                            <esform:input path="search.weight_lt" type="number" cssClass="form-control input-sm" placeholder="小于"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="widget-toolbox padding-8 clearfix text-right">
                        <button id="search" class="btn btn-xs btn-danger">
                            <i class="ace-icon fa fa-search"></i>
                            <span class="bigger-110">查询</span>
                        </button>
                        <a id="clearSearch" class="btn btn-link btn-xs">清空</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 widget-container-col ui-sortable">
            <div class="widget-box widget-color-blue ui-sortable-handle" data-table="table">
                <div class="widget-header">
                    <h5 class="widget-title bigger lighter">
                        <i class="ace-icon fa fa-table"></i> 列表
                    </h5>
                    <div class="widget-toolbar">
                        <shiro:hasPermission name="showcase:move:create">
                            <a class="white btnCreate" data-tooltip title="新增">
                                <i class="ace-icon fa fa-plus bigger-120"></i>
                            </a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="showcase:move:update">
                            <a class="white btnUpdate" data-tooltip title="修改">
                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                            </a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="showcase:move:deleted">
                            <a class="white btnDelete" data-tooltip title="删除">
                                <i class="ace-icon fa fa-times bigger-120"></i>
                            </a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="showcase:move:create or showcase:move:update or showcase:move:delete">
                            <a id="reweight" class="white" data-tooltip title="优化权重">
                                <i class="ace-icon fa fa-cogs bigger-120"></i>
                            </a>
                        </shiro:hasPermission>
                        <a class="white btnRefresh" data-tooltip title="刷新">
                            <i class="ace-icon fa fa-refresh bigger-120"></i>
                        </a>
                        <a class="orange2 btnFullscreen" data-tooltip title="全屏">
                            <i class="ace-icon fa fa-expand bigger-120"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main no-padding table_area">
                        <table  id="table" class="sort-table move-table table table-bordered table-hover"
                                data-move-url-prefix="${ctx}/showcase/move">
                            <thead>
                            <tr>
                                <th style="width: 80px">
                                    <a class="check-all" href="javascript:void(0);">全选</a>|
                                    <a class="reverse-all" href="javascript:void(0);">反选</a>
                                </th>
                                <th sort="id">编号</th><th sort="name">姓名</th><th sort="weight">权重</th><th>是否显示</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${page.list}" var="m" varStatus="status">
                                <tr id="${m.id}">
                                    <td class="check"><input type="checkbox" name="ids" value="${m.id}"></td>
                                    <td><a href="${ctx}/showcase/move/${m.id}">${m.id}</a></td>
                                    <td>${m.name}</td>
                                    <td>${m.weight}<es:movable page="${page}" first="${status.first}" last="${status.last}"/></td>
                                    <td>${m.show?'是':'否'}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div class="widget-toolbox padding-8 clearfix">
                        <es:page page="${page}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<es:contentFooter>
<script type="text/javascript">
    $(function() {

        $.movable = {
            /**
             * urlPrefix：指定移动URL的前缀，
             * 如/sample，生成的URL格式为/sample/{fromId}/{toId}/{direction:方向(up|down)}
             */
            initMoveableTable : function(table) {
                if(!table.length) {
                    return;
                }
                var urlPrefix = table.data("move-url-prefix");
                if(!urlPrefix) {
                    $.app.alert("请添加移动地址URL，如&lt;table move-url-prefix='/sample'&gt;<br/>自动生成：/sample/{fromId}/{toId}/{direction:方向(up|down)}");
                }
                var fixHelper = function (e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function (index) {
                        // Set helper cell sizes to match the original sizes
                        $(this).width($originals.eq(index).width())
                    });
                    return $helper;
                };

                //事表格可拖拽排序
                table.find("tbody")
                    .sortable({
                        helper: fixHelper,
                        opacity: 0.5,
                        cursor: "move",
                        placeholder: "sortable-placeholder",
                        update: function (even, ui) {
                            even.stopPropagation();
                            prepareMove(ui.item.find(".moveable").closest("td"));
                        }
                    });

                //弹出移动框
                table.find("a.pop-movable[rel=popover]")
                    .mouseenter(function () {
                        var a = $(this);
                        a.popover("show");
                        var idInput = a.closest("tr").find(".id");
                        idInput.focus();
                        a.next(".popover").find(".popover-up-btn,.popover-down-btn").click(function() {
                            var fromId = $(this).closest("tr").prop("id");
                            var toId = idInput.val();

                            if(!/\d+/.test(toId)) {
                                $.app.alert("请输入数字!");
                                return;
                            }

                            var fromTD = $(this).closest("td");
                            if($(this).hasClass("popover-up-btn")) {
                                move(fromTD, fromId, toId, "up");
                            } else {
                                move(fromTD, fromId, toId, "down");
                            }
                        });
                        a.parent().mouseleave(function() {
                            a.popover("hide");
                        });
                    });

                table.find(".up-btn,.down-btn").click(function() {
                    var fromTR = $(this).closest("tr");
                    if($(this).hasClass("up-btn")) {
                        fromTR.prev("tr").before(fromTR);
                    } else {
                        fromTR.next("tr").after(fromTR);
                    }
                    prepareMove($(this).closest("td"));
                });

                /**
                 *
                 * @param fromTD
                 */
                function prepareMove(fromTD) {
                    var fromTR = fromTD.closest("tr");
                    var fromId = fromTR.prop("id");
                    var nextTR = fromTR.next("tr");
                    if(nextTR.length) {
                        move(fromTD, fromId, nextTR.prop("id"), "down");
                    } else {
                        var preTR = fromTR.prev("tr");
                        move(fromTD, fromId, preTR.prop("id"), "up");
                    }

                }
                function move(fromTD, fromId, toId, direction) {
                    if(!(fromId && toId)) {
                        return;
                    }
                    var order = $.movable.tdOrder(fromTD);
                    if (!order) {
                        $.app.alert("请首先排序要移动的字段！");
                        return;
                    }
                    //如果升序排列 需要反转direction
                    if(order === "desc") {
                        if(direction === "up") {
                            direction = "down";
                        } else {
                            direction = "up";
                        }
                    }
                    $.app.openLoading("正在移动");
                    var url = urlPrefix + "/" + fromId + "/" + toId + "/" + direction;
                    $.getJSON(url, function(data) {
                        $.app.closeLoading();
                        if(data.success) {
                            $.app.alert(data.message, function(){
                                $.table.reloadTable(fromTD.closest("table"));
                            })
                        } else {
                            $.app.alert(data.message);
                        }
                    });
                }
            },
            initMovableReweight : function($btn, url) {
                $btn.click(function () {
                    $.app.confirm("确定优化权重吗？<br/><strong>注意：</strong>优化权重执行效率比较低，请在本系统使用人员较少时执行（如下班时间）",
                        function () {
                            $.app.openLoading("优化权重执行中。。");
                            $.getJSON(url, function(data) {
                                $.app.closeLoading();
                                if(!data.success) {
                                    $.app.alert(data.message);
                                } else {
                                    location.reload();
                                }
                            });
                        }
                    );
                });
            },
            tdOrder : function(td) {
                var tdIndex = td.closest("tr").children("td").index(td);
                return td.closest("table").find("thead > tr > th").eq(tdIndex).prop("order");
            }
        };

        $.table.initTable($('#table'));
        $.movable.initMovableReweight($("#reweight"), "${ctx}/showcase/move/reweight");
    });
</script>
</es:contentFooter>